<script setup lang="ts">
  import { PropType, ref } from 'vue'
  import pdf from '@/assets/image/pdf.png'
  import video from '@/assets/image/pages/order/new/video.png'
  import FilePreviewModal from './Modal.vue'
  import HImage from '../image/HImage.vue'

  defineOptions({
    name: 'FilePreviewList',
  })

  const props = defineProps({
    fileList: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    fileType: {
      type: String as PropType<'img' | 'pdf' | 'video'>,
      default: () => 'img',
    },
  })

  // 激活方向
  const activeArrow = ref<'right' | 'left'>('right')

  // 文件列表容器
  const fileListContentDiv = ref<HTMLDivElement | null>(null)

  // 文件预览弹窗显示状态
  const filePreviewModalVisible = ref(false)

  // 文件索引，用来标记当前预览的文件是第几个
  const filePreviewIndex = ref(0)

  /**
   * 左右箭头点击事件
   * @param type - right（右箭头），left（左箭头）
   */
  const handleArrowClick = (type: 'right' | 'left') => {
    if (fileListContentDiv.value) {
      if (type === 'right') {
        activeArrow.value = 'left'
        fileListContentDiv.value.style.transform = `translateX(-100%)`
      } else {
        activeArrow.value = 'right'
        fileListContentDiv.value.style.transform = `translateX(0)`
      }
    }
  }

  /**
   * 文件预览点击事件
   * @param fileIndex - 文件索引
   */
  const handleFilePreviewClick = (fileIndex: number) => {
    filePreviewIndex.value = fileIndex
    filePreviewModalVisible.value = true
  }
</script>

<template>
  <div class="file-preview-list">
    <div
      v-show="props.fileList.length >= 6"
      :class="['arrow', activeArrow === 'left' ? 'enabled_arrow' : 'disabled_arrow']"
      @click="handleArrowClick('left')"
    >
      <i class="iconfont icon-arrow-left"></i>
    </div>
    <div class="list">
      <div ref="fileListContentDiv" class="list_content">
        <div v-for="(file, fileIndex) in props.fileList" :key="fileIndex" class="file">
          <template v-if="file">
            <h-image
              v-if="props.fileType === 'img'"
              :src="file"
              :width="80"
              :height="50"
              fit="contain"
              :padding="2"
              :preview-src-list="props.fileList"
              :initial-index="fileIndex"
              :show-del-btn="false"
            />
            <h-image
              v-if="props.fileType === 'pdf'"
              :src="pdf"
              :width="80"
              :height="50"
              fit="contain"
              :is-show-img-preview="false"
              :show-del-btn="false"
              @preview="handleFilePreviewClick(fileIndex)"
              @mask-click="handleFilePreviewClick(fileIndex)"
            />
            <h-image
              v-if="props.fileType === 'video'"
              :src="video"
              :width="80"
              :height="50"
              fit="contain"
              :is-show-img-preview="false"
              :show-del-btn="false"
              @preview="handleFilePreviewClick(fileIndex)"
              @mask-click="handleFilePreviewClick(fileIndex)"
            />
          </template>
        </div>
      </div>
    </div>
    <div
      v-show="props.fileList.length >= 6"
      :class="['arrow', activeArrow === 'right' ? 'enabled_arrow' : 'disabled_arrow']"
      @click="handleArrowClick('right')"
    >
      <i class="iconfont icon-arrow-right"></i>
    </div>

    <file-preview-modal
      v-model="filePreviewModalVisible"
      :file-url-list="props.fileList"
      :file-type="(props.fileType as 'pdf' | 'video')"
      :file-index="filePreviewIndex"
    />
  </div>
</template>

<style scoped lang="scss">
  .file-preview-list {
    max-width: 480px;
    width: fit-content;
    display: flex;
    gap: 5px;

    .arrow {
      min-width: 24px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-sizing: border-box;
      transition: all 0.4s ease;
    }

    .enabled_arrow {
      cursor: pointer;
      border: 1px solid #ebeef5;
      transition: all 0.4s;

      .iconfont {
        color: $primaryColor;
        transition: all 0.4s;
      }

      &:hover {
        border-color: $primaryColor;
        background-color: $primaryColor;

        .iconfont {
          color: #fff;
        }
      }
    }

    .disabled_arrow {
      cursor: not-allowed;
      border: 1px solid #ebeef5;

      .iconfont {
        color: #ebeef5;
      }
    }

    .list {
      width: fit-content;
      max-width: 420px;
      min-width: 84px;
      overflow: hidden;

      .list_content {
        display: flex;
        gap: 5px;
        transition: all 0.4s ease;

        .file {
          width: 80px;
          height: 50px;
        }
      }
    }
  }
</style>
